<!doctype html>
<html lang="en">
  <head>
    <title>Photographer</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/superslides.css" rel="stylesheet">
    <link href="css/jquery.fancybox.css" rel="stylesheet">
    <link href="css/owl.carousel.css" rel="stylesheet">
    <link href="css/isotope.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body class="front">
    <div id="main">
      <div class="header-v1">
        <div class="container">
          <div class="header-inner clearfix">
            <div class="my_search_wrapper">
              <div class="my_search_button">
                <a href="shopping-cart.html">
                  <i class="fa fa-search" aria-hidden="true"></i>
                </a>
              </div>
              <div class="my_search_popup">
                <form class="clearfix">
                  <input type="text" class="form-control" placeholder="Search...">
                  <a href="#" class=""><i class="fa fa-search"></i></a>
                </form>
              </div>
            </div>
            <nav class="navbar_ navbar navbar-expand-md clearfix">
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="nav navbar-nav sf-menu clearfix">
                  <li class="nav-item"><a href="index.html" class="active nav-link">Home</a></li>
                  <li class="nav-item"><a href="about.html" class="nav-link">About us</a></li>
                  <li class="nav-item sub-menu">
                    <a href="portfolio.html" class="nav-link">Portfolio <i class="fa fa-caret-down" aria-hidden="true"></i></a>
                    <div class="sf-mega">
                      <ul>

                        <li><a href="portfolio.html">Portfolio Fullwidth</a></li>
                        <li><a href="portfolio2.html">Portfolio Simple</a></li>
                        <li><a href="detail.html">Photo Detail Page</a></li>

                      </ul>
                    </div>
                  </li>
                  <li class="nav-item sub-menu">
                    <a href="#" class="nav-link">Blog <i class="fa fa-caret-down" aria-hidden="true"></i></a>
                    <div class="sf-mega">
                      <ul>

                        <li><a href="blog.html">Blog Right Side <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                          <div class="sf-mega">
                            <ul>
                              <li><a href="post.html">Post Right Side</a></li>


                            </ul>
                          </div>
                        </li>
                        <li><a href="blog-left.html">Blog Left Side <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                          <div class="sf-mega">
                            <ul>
                              <li><a href="post-left.html">Post Left Side</a></li>

                            </ul>
                          </div>
                        </li>

                      </ul>
                    </div>



                  </li>
                  <li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
                </ul>
              </div>
            </nav>
          </div>
        </div>
      </div>
      <div id="home" class="">
        <div id="slides_wrapper" class="">
          <div id="slides">
            <ul class="slides-container">
              <li>
                <img src="images/slide01.jpg" alt="" class="img">
                <div class="caption">
                  <div class="container">
                    <div class="txt1">WELCOME TO OUR</div>
                    <div class="txt2">Creative<br>PHOTO STUDIO</div>
                    <div class="txt3">There are always two people in every picture: the photographer and the viewer.</div>
                    <div class="link1"><a href="#" class="btn1">SEE PORTFOLIO</a></div>
                  </div>
                </div>
              </li>
              <li>
                <img src="images/slide01.jpg" alt="" class="img">
                <div class="caption">
                  <div class="container">
                    <div class="txt1">WELCOME TO OUR</div>
                    <div class="txt2">Creative<br>PHOTO GALLERY</div>
                    <div class="txt3">A photograph is a secret about a secret. The more it tells you the less you know.</div>
                    <div class="link1"><a href="#" class="btn1">SEE PORTFOLIO</a></div>
                  </div>
                </div>
              </li>
              <li>
                <img src="images/slide02.jpg" alt="" class="img">
                <div class="caption">
                  <div class="container">
                    <div class="txt1">WELCOME TO OUR</div>
                    <div class="txt2">Creative<br>PHOTOGRAPHY</div>
                    <div class="txt3">If you see something that moves you, and then snap it, you keep a moment.</div>
                    <div class="link1"><a href="#" class="btn1">SEE PORTFOLIO</a></div>
                  </div>
                </div>
              </li>
            </ul>
            <nav class="slides-navigation">
              <a href="#" class="prev">PREV</a><span>|</span><a href="#" class="next">NEXT</a>
            </nav>
          </div>
        </div>
        <div class="mouse"><a href="#welcome" class="scroll-to"><img src="images/mouse.png" alt="" class="img-responsive"></a></div>
        <div class="left-panel">
          <div class="social-left-txt">follow us</div>
          <ul class="social-left clearfix">
            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
            <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
          </ul>
        </div>
      </div>
      <div id="welcome" class="page-section title-left">
        <div class="container">
          <div class="row">
            <div class="col-md-6">
              <figure><img src="images/film.png" alt="" class="img-fluid"></figure>
            </div>
            <div class="col-md-6">
              <div class="title1">Hello World!</div>
              <div class="title2">We Are photo studio</div>
              <p>
                Founded in 2017, by designers George Smith, Gridgum Studio is a global brand and Photo agency with offices in the creative hubs of London and San Francisco.
              </p>
              <p>
                I opened the agency after spotting a split in the creative industry. Studios were either boutique and beautiful, but only managing to work on a few projects or of a massive scale and impersonal with their client relationships. Gridgum Studio was created with the aim to fill this gap – delivering the quality of boutique, bespoke design to global brands and audiences.
              </p>
              <p>
                Using effective strategies and innovative creative thinking we engage audiences, encourage relevant conversation, influence behaviour, and achieve brand objectives.
              </p>
              <div class="sign"><img src="images/sign.png" alt="" class="img-fluid"></div>
            </div>
          </div>
        </div>
      </div>
      <div id="services" class="page-section dark-section">
        <div class="container">

          <div class="title1">our SERVICES</div>
          <div class="title2">What We Can Do</div>

          <div class="features">
            <div class="row">
              <div class="col-lg-4">
                <div class="left_box">
                  <div class="features1">
                    <figure><i class="fa fa-expand" aria-hidden="true"></i></figure>
                    <div class="caption">
                      <div class="txt1">Fully Responsive</div>
                      <div class="txt2">Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in egestas.</div>
                    </div>
                  </div>
                  <div class="features1">
                    <figure><i class="fa fa-tablet" aria-hidden="true"></i></figure>
                    <div class="caption">
                      <div class="txt1">Tested All Devices</div>
                      <div class="txt2">Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                    </div>
                  </div>
                  <div class="features1">
                    <figure><i class="fa fa-eye" aria-hidden="true"></i></figure>
                    <div class="caption">
                      <div class="txt1">Retina Ready</div>
                      <div class="txt2">Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in egestas.</div>
                    </div>
                  </div>
                  <div class="features1">
                    <figure><i class="fa fa-eyedropper" aria-hidden="true"></i></figure>
                    <div class="caption">
                      <div class="txt1">Stunning Colors</div>
                      <div class="txt2">Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Donec sed odio dui.</div>
                    </div>
                  </div>
                  <div class="features1">
                    <a href="#"><img src="images/google-play.png" alt="" class="img-fluid"></a>
                  </div>


                </div>
              </div>
              <div class="col-lg-4 order-lg-12">
                <div class="right_box">
                  <div class="features1">
                    <figure><i class="fa fa-font" aria-hidden="true"></i></figure>
                    <div class="caption">
                      <div class="txt1">Easy Readability</div>
                      <div class="txt2">Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero elit pharetra augue id ligula porta felis.</div>
                    </div>
                  </div>
                  <div class="features1">
                    <figure><i class="fa fa-hand-o-up" aria-hidden="true"></i></figure>
                    <div class="caption">
                      <div class="txt1">Swipe Functionality</div>
                      <div class="txt2">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus faucibus.</div>
                    </div>
                  </div>
                  <div class="features1">
                    <figure><i class="fa fa-diamond" aria-hidden="true"></i></figure>
                    <div class="caption">
                      <div class="txt1">Multi-Concept</div>
                      <div class="txt2">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus etiam porta sem.</div>
                    </div>
                  </div>
                  <div class="features1">
                    <figure><i class="fa fa-life-ring" aria-hidden="true"></i></figure>
                    <div class="caption">
                      <div class="txt1">Free Support</div>
                      <div class="txt2">Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes.</div>
                    </div>
                  </div>
                  <div class="features1">
                    <a href="#"><img src="images/app-store.png" alt="" class="img-fluid"></a>
                  </div>


                </div>
              </div>
              <div class="col-lg-4 order-lg-1">
                <div class="center_box">
                  <img src="images/iphone.png" alt="" class="img-fluid"></div>
              </div>
            </div>
          </div>






        </div>
      </div>
      <div id="our-skills">
        <div class="left-box-wrapper">
          <div class="left-box">
            <img src="images/camera.png" alt="" class="img-fluid">
          </div>
        </div>
        <div class="right-box-wrapper">
          <div class="right-box title-left">
            <div class="title1">experts</div>
            <div class="title2">Our Skills</div>
            <div class="percentage1">
              <div class="txt1">PHOTHOSHOP</div>
              <div class="bg">
                <div class="animated-distance" data-num="90" data-duration="1900" data-animation-delay="0"><span></span></div>
              </div>
            </div>
            <div class="percentage1">
              <div class="txt1">development</div>
              <div class="bg">
                <div class="animated-distance" data-num="95" data-duration="1900" data-animation-delay="0"><span></span></div>
              </div>
            </div>
            <div class="percentage1">
              <div class="txt1">graphic design</div>
              <div class="bg">
                <div class="animated-distance" data-num="85" data-duration="1900" data-animation-delay="0"><span></span></div>
              </div>
            </div>
            <div class="percentage1">
              <div class="txt1">marketing</div>
              <div class="bg">
                <div class="animated-distance" data-num="80" data-duration="1900" data-animation-delay="0"><span></span></div>
              </div>
            </div>


          </div>
        </div>
      </div>
      <div id="gallery">

        <div class="gallery-top-wrapper">
          <div class="container">
            <div class="gallery-top clearfix">
              <div class="caption">
                <div class="title1">work & more</div>
                <div class="title2">Portfolio</div>
              </div>
              <div id="options" class="clearfix">
                <ul id="filters" class="option-set clearfix" data-option-key="filter">
                  <li><a href="#filter" data-option-value="*" class="selected">All</a></li>
                  <li><a href="#filter" data-option-value=".isotope-filter1">branding</a></li>
                  <li><a href="#filter" data-option-value=".isotope-filter2">web</a></li>
                  <li><a href="#filter" data-option-value=".isotope-filter3">photography</a></li>
                  <li><a href="#filter" data-option-value=".isotope-filter4">game design</a></li>
                </ul>
              </div><!-- #options -->
            </div>
          </div>
        </div>

        <div class="isotope-box">
          <div id="container" class="clearfix">
            <ul class="thumbnails clearfix" id="isotope-items">
              <div class="grid-sizer col-12 col-md-3"></div>
              <div class="gutter-sizer"></div>

              <li class="element isotope-filter1 col-12 col-md-6">
                <div class="thumb-isotope">
                  <div class="thumbnail clearfix">
                    <a href="images/portfolio01.jpg" class="fancybox">
                      <figure>
                        <img src="images/portfolio01.jpg" alt="">
                      </figure>
                    </a>
                  </div>
                </div>
              </li>
              <li class="element isotope-filter2 col-12 col-md-3">
                <div class="thumb-isotope">
                  <div class="thumbnail clearfix">
                    <a href="images/portfolio02.jpg" class="fancybox">
                      <figure>
                        <img src="images/portfolio02.jpg" alt="">
                      </figure>
                    </a>
                  </div>
                </div>
              </li>
              <li class="element isotope-filter3 col-12 col-md-3">
                <div class="thumb-isotope">
                  <div class="thumbnail clearfix">
                    <a href="images/portfolio03.jpg" class="fancybox">
                      <figure>
                        <img src="images/portfolio03.jpg" alt="">
                      </figure>
                    </a>
                  </div>
                </div>
              </li>
              <li class="element isotope-filter4 col-12 col-md-6">
                <div class="thumb-isotope">
                  <div class="thumbnail clearfix">
                    <a href="images/portfolio04.jpg" class="fancybox">
                      <figure>
                        <img src="images/portfolio04.jpg" alt="">
                      </figure>
                    </a>
                  </div>
                </div>
              </li>


            </ul>
          </div>
        </div>

      </div>
      <div id="contact-us" class="page-section">
        <div class="container">
          <div class="title1">contact us</div>
          <div class="title2">Get in touch</div>
          <p class="text-center">
            <i>
              A rem ipsum dolor sit amet concfateur non troppo di sarono?
            </i>
          </p>
          <br><br>
          <div class="row">
            <div class="col-md-4">
              <div class="contact-us-block">
                <figure><img src="images/ic1.png" alt="" class="img-fluid"></figure>
                <div class="txt1">41 Gridgum Sreet 133/2 NewYork City, US</div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="contact-us-block">
                <figure><img src="images/ic2.png" alt="" class="img-fluid"></figure>
                <div class="txt1">Phone: (00) 123 456 789</div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="contact-us-block">
                <figure><img src="images/ic3.png" alt="" class="img-fluid"></figure>
                <div class="txt1">Email: <a href="#">info.contact@gmail.com</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="google_map"></div>
      <div id="partners">
        <div class="container-fluid">
          <div class="row align-items-center">
            <div class="col-md-2">
              <div class="partner1">
                <a href="#"><img src="images/partner01.png" alt="" class="img-fluid"></a>
              </div>
            </div>
            <div class="col-md-2">
              <div class="partner1">
                <a href="#"><img src="images/partner02.png" alt="" class="img-fluid"></a>
              </div>
            </div>
            <div class="col-md-2">
              <div class="partner1">
                <a href="#"><img src="images/partner03.png" alt="" class="img-fluid"></a>
              </div>
            </div>
            <div class="col-md-2">
              <div class="partner1">
                <a href="#"><img src="images/partner04.png" alt="" class="img-fluid"></a>
              </div>
            </div>
            <div class="col-md-2">
              <div class="partner1">
                <a href="#"><img src="images/partner05.png" alt="" class="img-fluid"></a>
              </div>
            </div>
            <div class="col-md-2">
              <div class="partner1">
                <a href="#"><img src="images/partner06.png" alt="" class="img-fluid"></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bot-wrapper">
        <div class="bot1-wrapper">
          <div class="container">
            <div class="bot1 clearfix">
              <div class="logo2_wrapper">
                <a href="index.html" class="logo2">
                  <img src="images/logo2.png" alt="" class="img-fluid">
                </a>
              </div>
              <div class="social-footer-wrapper">
                <ul class="social-footer clearfix">
                  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                  <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                  <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                </ul>
              </div>
              <p>
                <i>
                  Excepteur sint occaecat cupidatat non proident, sunt in culpa  officia deserunt<br>mollitid est laborum. Sed ut perspiciatis unde qui omnis.
                </i>
              </p>
            </div>
          </div>
        </div>
        <div class="bot2-wrapper">
          <div class="container">
            <div class="bot2 clearfix">
              <div class="row">
                <div class="col-md-4">
                  <div class="bot2-title">
                    Latest Twitter
                  </div>
                  <div class="contact1">
                    <b>A:</b> 40 Baria Sreet 133/2 NewYork City, US
                  </div>
                  <div class="contact1">
                    <b>P:</b> (00) 123 456 789
                  </div>
                  <div class="contact1">
                    <b>F:</b> (00) 987 654 321
                  </div>
                  <div class="contact1">
                    <b>E:</b> <a href="#">info.contact@gmail.com</a>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="bot2-title">
                    recent posts
                  </div>
                  <div class="recent-posts clearfix">
                    <a href="#" class="clearfix">
                      <figure><img src="images/recent-posts1.jpg" alt="" class="img-fluid"></figure>
                      <div class="caption">
                        <div class="txt1">The difference between art and design in nowadays</div>
                        <div class="txt2">13 March, 2016</div>
                      </div>
                    </a>
                  </div>
                  <div class="recent-posts clearfix">
                    <a href="#" class="clearfix">
                      <figure><img src="images/recent-posts2.jpg" alt="" class="img-fluid"></figure>
                      <div class="caption">
                        <div class="txt1">The difference between art and design in nowadays</div>
                        <div class="txt2">13 March, 2016</div>
                      </div>
                    </a>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="bot2-title">
                    RECENT WORKS
                  </div>
                  <ul class="best1 clearfix">
                    <li><a href="#"><img src="images/recent-works1.jpg" alt="" class="img-fluid"></a></li>
                    <li><a href="#"><img src="images/recent-works2.jpg" alt="" class="img-fluid"></a></li>
                    <li><a href="#"><img src="images/recent-works3.jpg" alt="" class="img-fluid"></a></li>
                    <li><a href="#"><img src="images/recent-works4.jpg" alt="" class="img-fluid"></a></li>
                    <li><a href="#"><img src="images/recent-works5.jpg" alt="" class="img-fluid"></a></li>
                    <li><a href="#"><img src="images/recent-works6.jpg" alt="" class="img-fluid"></a></li>
                    <li><a href="#"><img src="images/recent-works7.jpg" alt="" class="img-fluid"></a></li>
                    <li><a href="#"><img src="images/recent-works8.jpg" alt="" class="img-fluid"></a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bot3-wrapper">
          <div class="container">
            <div class="bot3 clearfix">
              <ul class="menu-bot">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
              <div class="copyrights">Copyright @2018 <a href="https://gridgum.com" target="_blank">Gridgum</a>. All rights Revierves Inc.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/superfish.js"></script>
    <script src="js/jquery.superslides.js"></script>
    <script src="js/jquery.fancybox.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery.appear.js"></script>
    <script src="js/owl.carousel.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA85u2f3GPNnJhIJeggViAfB8zMkUbCHNE"></script>
    <script src="js/googlemap.js"></script>

    <script src="js/isotope.pkgd.min.js"></script>
    <script src="js/imagesloaded.pkgd.js"></script>

    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>

  </body>
</html>
